<template>
<div class='info-container'>
    <div class='info-header'>
        <h1>{{info.title}}</h1>
        <p>
            <span>发表时间：{{info.add_time | dataFormat}}</span>
            <span>点击{{info.click}}次</span>
        </p>
        <hr>
    </div>
      <div class='thumbs'>
             <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key='item.src'>
        </div>
    <div class="info-body">
        <!-- 缩略图 -->
            
        <p v-html='info.content'></p>
   
<cmt-box :id='imgid'></cmt-box>
 </div>
</div>
  
</template>
<script>
import Comment from '../Comment.vue';
    export default{
        data(){
            return {
                imgid:this.$route.params.id,
                info:{},
                list:[]
            }
        },
        created(){
            this.getPhotoInfo();
            this.getThumImages();
        },
        methods:{
            getPhotoInfo(){
                this.$http.get('api/getimageInfo/'+this.imgid).then(result=>{
                    console.log(result.body);
                    if(result.body.status==1){
                        Toast('获取信息失败！')
                    }else{
                        this.info=result.body.message[0];
                    }
                })
            },
            getThumImages(){
                this.$http.get('api/getthumimages/'+this.imgid).then(results=>{
                    console.log(results.body);
                    if(results.body.status===1){
                        Toast('获取图片失败！ ')
                    }else{
                        results.body.message.forEach((item,i)=>{
                            item.w=600,
                            item.h=400
                        })
                        this.list=results.body.message;
                        console.log(this.list)
                    }
                })
            }
        },
        components:{
            cmtBox:Comment
        }
    }

</script>
<style scoped lang='scss'>
.info-container{
    padding:0 5px;
    .info-header{
        h1{
        font-size:15px;
        color:#26a2ff;
        text-align:center;
        line-height:35px;
        }
        p{
            font-size:12px;
            display: flex;
            justify-content:space-between;
        }
    }
    .info-body{
        p{
            color:#000;
            line-height:30px;
        }
       
      
    }
  /*   div.thumbs{
            display: flex;
            justify-content:left;
            flex-wrap:wrap;
        } */
        div.thumbs{
            img{
                margin:5px;
            }
        }
    
}
</style>

